import React from 'react'
import "./index.css"
import {nanoid} from 'nanoid'
//通过传递参数形式把父组件的useState传递过来
export default function Header({setTodoList,todoList}) {
  //发布事件函数
  const publishHandle = (e) => {
    //console.log(e);
    //判断用户是否回车 回车键码13
    if (e.keyCode !== 13) return;
    //获取输入的内容判断内容是否为空
    //console.log(e.target.value);
    const publishValue = e.target.value.trim();
    if (!publishValue) return alert('请输入正确的内容')
    //创造新的todo 对象
    const newtodo = {id:nanoid(),todo:publishValue,done:false}
    //进行更新
    setTodoList([newtodo,...todoList])
    //清空表单
    e.target.value=''
  }

  return (
    <div className="todo-header">
      <input type="text" onKeyUp={publishHandle} placeholder="请输入你的任务名称，按回车键确认" />
    </div>
  )
}
